import {
    Scene, WebGLRenderer, BoxGeometry, MeshNormalMaterial, Mesh,
    Matrix4, Vector3, PerspectiveCamera
} from 'three';

const scene = new Scene();
const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.copy(new Vector3(0, 0, 5));
camera.lookAt(new Vector3(0, 0, 0));

//渲染器(新创建)
// const renderer = new WebGLRenderer();
// renderer.setSize(window.innerWidth, window.innerHeight);
// document.body.appendChild(renderer.domElement);

//渲染器(已创建)
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const renderer = new WebGLRenderer({ canvas: canvas });

const geometry = new BoxGeometry();
const material = new MeshNormalMaterial();
const cube = new Mesh(geometry, material);

scene.add(cube);





(function ani() {

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    //console.log(cube.matrix.elements)

    renderer.render(scene, camera);
    requestAnimationFrame(ani);
})();
